<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英语生词记录</title>
    <style>
        :root {
            --primary-color: #2563eb;
            --secondary-color: #3b82f6;
            --background-color: #f8fafc;
            --text-color: #1e293b;
            --border-color: #e2e8f0;
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
        }

        h1 {
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            font-weight: 600;
            font-size: 2rem;
        }

        form {
            margin-bottom: 1.5rem;
            background: white;
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: var(--shadow);
        }

        input[type="text"], select {
            padding: 0.75rem;
            border: 1px solid var(--border-color);
            border-radius: 0.375rem;
            transition: var(--transition);
            width: 200px;
            margin: 0 auto 0.75rem;
            height: 38px;
            display: block;
        }
        
        button {
            padding: 0.75rem 1.5rem;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 0.375rem;
            cursor: pointer;
            transition: var(--transition);
            font-weight: 500;
            height: 38px;
        }
        
        select {
            height: 38px;
            width: 100%;
            margin: 0 auto;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        input[type="text"]:focus, select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        button { white-space: nowrap;
            padding: 0.75rem 1.5rem;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 0.375rem;
            cursor: pointer;
            transition: var(--transition);
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        button:hover {
            background-color: var(--secondary-color);
            transform: translateY(-1px);
        }

        button:active {
            transform: translateY(0);
        }

        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        li {
            padding: 0.5rem;
            margin-bottom: 0.5rem;
            background: white;
            border-radius: 0.5rem;
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            transition: var(--transition);
            height: 80px;
            align-items: center;
        }

        li:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        }

        .translation {
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .translation.show {
            opacity: 1;
        }

        @media (max-width: 600px) {
            .container {
                padding: 1rem;
            }

            li {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>英语生词记录</h1>
        <p style="margin-bottom: 20px;">作者：Simon，版本：0.1.5  代码全部由AI生成</p>
        

        <div style="margin: 20px 0; border-top: 1px solid #ddd; padding-top: 15px;">
            <div style="display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 15px;">
                {% for book in books %}
                <a href="{{ url_for('index') }}?book={{ book }}" style="text-decoration: none; flex: 0 0 auto;">
                    <button style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; min-width: 100px;{% if book == current_book %} background-color: #2196F3;{% endif %}">


                        {{ book }}
                    </button>
                </a>
                {% endfor %}
            </div>
            <form action="/add_book" method="POST" style="display: flex; align-items: center; gap: 15px; height: 38px;">
                <input type="text" name="book_name" placeholder="新单词本名称" required style="height: 38px; line-height: 38px;">
                <button type="submit">新建</button>
                <select id="bookToDelete" style="height: 38px; width: 150px;">
                    {% for book in books if book != '默认单词本' %}
                    <option value="{{ book }}">{{ book }}</option>
                    {% endfor %}
                </select>
                <button type="button" onclick="deleteBook()" style="background-color: #ff5722;">删除选中</button>
            </form>
        </div>
        
        <form action="/add" method="POST" style="display: flex; flex-wrap: wrap; gap: 10px;">
            <input type="text" id="wordInput" name="word" placeholder="输入新单词" required style="flex: 1;">
            <input type="text" name="translation" placeholder="输入翻译" required style="flex: 1;">
            <select name="pos" required style="height: 65px; flex: 1;">
                <option value="noun">名词</option>
                <option value="verb">动词</option>
                <option value="adj">形容词</option>
                <option value="adv">副词</option>
                <option value="phrase">短语</option>
            </select>
            <button type="submit">添加</button>
        </form>
        <style>
            @media (max-width: 600px) {
                form[action="/add"] {
                    flex-direction: column;
                    align-items: center;
                    padding: 0 1rem;
                }
                form[action="/add"] input,
                form[action="/add"] select {
                    width: 100%;
                    max-width: 300px;
                    margin: 0.5rem 0;
                }
                @media (max-width: 600px) {
                    li {
                        flex-direction: row;
                        flex-wrap: wrap;
                        gap: 0.5rem;
                        align-items: center;
                        justify-content: center;
                    }
                    li > * {
                        white-space: nowrap;
                    }
                }
            }
        </style>
        <ul>
            {% for entry in word_data %}
            <li>{{ entry.word }}
                    {% for trans in entry.translations %}
                        <div style="display: flex; align-items: center; gap: 0.5rem;">[{{ trans.pos }}] <button onclick="toggleTranslation(this)">显示翻译</button><span class="translation">{{ trans.translation }}</span></div>
                    {% endfor %}
            <button onclick="deleteWord('{{ entry.word }}')" style="background-color: #f44336;">删除</button>
            </li>
            {% endfor %}
        </ul>
    </div>
</body>
<script>
function toggleTranslation(button) {
    const translation = button.nextElementSibling;
    translation.classList.toggle('show');
}

function rememberWord(button, word) {
    fetch(`/remember/${word}`, { method: 'POST' })
        .then(() => {
            button.parentElement.remove();
            // 24小时后自动刷新页面
            setTimeout(() => {
                window.location.reload();
            }, 86400000);
        });
}

function deleteWord(word) {
    fetch(`/delete_word/${word}`, { method: 'POST' })
        .then(response => {
            if (response.ok) {
                window.location.reload();
            }
        });
}
function deleteBook() {
    const bookName = document.getElementById('bookToDelete').value;
    if(confirm('确定要永久删除 ' + bookName + ' 单词本吗？')) {
        fetch('/delete_book', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'book_name=' + encodeURIComponent(bookName)
        }).then(() => window.location.reload());
    }
}
</script>
</html>

<a href="/export_csv"><button style="position: absolute; top: 20px; right: 120px; background-color: var(--primary-color);">导出CSV</button></a>
<a href="/export_db"><button style="position: absolute; top: 20px; right: 20px; background-color: var(--primary-color);">导出数据库</button></a>
</script>
</html>